<template>
<ul class="bg-bubbles" :style="{background: `url(${rootUrl}img/login/bg.jpg)`}" >
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</template>

<script>
export default {
  name: 'bgbubbles'
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;

  li {
    position: absolute;
    list-style: none;
    display: block;
    width: 16px;
    height: 16px;
    bottom: -160px;
    animation: square 25s infinite;
    transition-timing-function: linear;
    border-radius: 4px;
    opacity:.3;
    &:nth-child(12) {
      left: 5%;
      width: 32px;
      height: 32px;
      animation-delay: 3s;
      animation-duration: 10s;
      background: #E54757;
    }
    &:nth-child(1) {
      left: 10%;
      background: #31B48D;
    }
    &:nth-child(2) {
      left: 20%;
      width: 32px;
      height: 32px;
      animation-duration: 15s;
      background: #38A0F3;
    }
    &:nth-child(11) {
      left: 22%;
      width: 40px;
      height: 40px;
      animation-delay: 3s;
      background: #7438C7;
    }
    &:nth-child(3) {
      left: 25%;
      background: #31B48D;
    }
    &:nth-child(9) {
      left: 25%;
      width: 24px;
      height: 24px;
      animation-delay: 1s;
      animation-duration: 10s;
      background: #38A0F3;
    }
    &:nth-child(7) {
      left: 32%;
      animation-delay: 3s;
      background: #7438C7;
    }
    &:nth-child(4) {
      left: 40%;
      width: 40px;
      height: 40px;
      animation-duration: 20s;
      background: #E54757;
    }
    &:nth-child(8) {
      left: 55%;
      width: 24px;
      height: 24px;
      animation-delay: 2s;
      animation-duration: 10s;
      background: #31B48D;
    }

    &:nth-child(5) {
      left: 70%;
      background: #7438C7;
    }
    &:nth-child(14) {
      left: 70%;
      width: 40px;
      height: 40px;
      animation-delay: 6s;
      background: #38A0F3;
    }
    &:nth-child(6) {
      left: 80%;
      width: 24px;
      height: 24px;
      background: #E54757;
    }
    &:nth-child(13) {
      left: 85%;
      width: 40px;
      height: 40px;
      animation-delay: 5s;
      animation-duration: 10s;
      background: #31B48D;
    }
    &:nth-child(10) {
      left: 90%;
      width: 24px;
      height: 24px;
      animation-delay: 3s;
      background: #38A0F3;
    }
  }


}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px) rotate(600deg);
  }
}
</style>
